<template>
  <div>
    <div class="banner">
      <banner/>
    </div>
    <div class="tabs">
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabs" :key="item.code" :label="item.label" :name="item.code"></el-tab-pane>
      </el-tabs>
    </div>
    <!--列表-->
    <div :hidden="!detailHidden" class="content">
      <a v-for="item in news" :key="item.id" @click="showDetails(item.id)">
        <el-card style="margin: 10px" shadow="hover">
          <div class="div-left">
            <el-image
              class="img-cover"
              :src="item.cover"
              fit="fill"></el-image>
          </div>
          <div class="div-right">
            <div><span><h3>{{item.title}}</h3></span></div>
            <hr/>
            <div style="color: #999999;font-size: 14px"><i class="el-icon-time"></i>  {{item.dateTime.toLocaleDateString()}}</div>
            <hr/>
            <div style="color: #999999">{{item.describe}}</div>
          </div>
        </el-card>
      </a>
      <div style="text-align: center;margin: 10px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="this.pageData.total"
          @current-change="handelPage">
        </el-pagination>
      </div>
    </div>
    <!--详情·-->
    <div :hidden="detailHidden" class="content-details">
      <el-card style="margin: 10px" shadow="always">
        <div>
          <div style="margin: 20px">
            <h3>{{this.form.title}}</h3>
            <hr/>
            <span style="color: #999999;font-size: 14px"><i class="el-icon-time"></i>  {{new Date(this.form.dateTime).toLocaleDateString()}}</span>
            <hr/>
          </div>
          <div style="padding: 30px" v-html="form.content">
            <!--<div style="width: 100%;text-align:center">
              <el-image
                class="" style="width: 80%"
                :src="this.form.image"
                fit="fill"></el-image>
            </div>
            <p>
              {{this.form.content}}
            </p>-->
          </div>
          <hr/>
          <div class="div-page">
            <span class="page-left">
              <a class="a-page" @click="showDetails(form.upForm!=null?form.upForm.id:null)" href="#">
                <i class="el-icon-arrow-left"></i>  上一篇：{{this.form.upForm!=null?this.form.upForm.title:'没有了'}}
              </a>
            </span>
            <span class="page-right">
              <a class="a-page" @click="showDetails(form.bottomForm!=null?form.bottomForm.id:null)" href="#">
                下一篇：{{this.form.bottomForm!=null?this.form.bottomForm.title:'没有了'}}  <i class="el-icon-arrow-right"></i>
              </a>
            </span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import Banner from "../components/Banner";
    export default {
        name: "NewsCenter",
        data(){
            return{
                activeName: '1',
                tabs:[
                    {
                        label:"公司新闻",
                        code:"1"
                    },{
                        label:"行业新闻",
                        code:"2"
                    }
                ],
                banners:[
                    { src:require("../assets/banner/newsCenter/新闻中心.jpg")},
                    { src:require("../assets/banner/newsCenter/新闻中心.jpg")},
                    { src:require("../assets/banner/newsCenter/新闻中心.jpg")},
                ],
                pageData:{
                    page: 1,
                    limit: 10,
                    total:0
                },
                form:{
                    id:null,
                    image:null,
                    cover:null,
                    title:null,
                    type:0,
                    dateTime:null,
                    content:null,
                    upForm:null,
                    bottomForm:null
                },
                news:[],
                type:0,
                detailHidden:true
            }
        },
        watch: {
            '$route':'setActiceName'
        },
        methods: {
            handleClick(tab, event) {
                this.detailHidden=true;
                this.type=tab.name;
                this.listNews();
            },
            setActiceName(){
                var url=window.location.href;
                if (url.indexOf("?")>-1){
                    var active=url.split("?")[1];
                    this.activeName=active;
                    this.type=this.activeName;
                }
                this.listNews();
            },
            //详情页
            showDetails(id){
                if (id==null){
                    return;
                }
                var news=this.news;
                this.detailHidden=false;
                this.form=JSON.parse(JSON.stringify(news.filter(item=>item.id==id)[0]));
                news.forEach((item,index)=>{
                    if (id==item.id){
                        if(index==0){
                            this.form.upForm=null;
                            this.form.bottomForm=news[index+1];
                        }
                        if (index==this.news.length-1){
                            this.form.upForm=news[index-1];
                            this.form.bottomForm=null;
                        }
                        if (index!=0 && index!=this.news.length-1){
                            this.form.upForm=news[index-1];
                            this.form.bottomForm=news[index+1];
                        }
                    }
                });

            },
            listNews(){
                this.news=[
                    {
                        id:2,
                        cover:"http://8.130.94.42:8080/hgkx/image/2023/07/31/89107e6b-5193-483d-9d49-91b646619690.png",
                        title:"跨界合作|哈工科讯与九三集团智能联手，推动立体库项目创新发展",
                        type:1,
                        dateTime:new Date("2018-06-01"),
                        describe:"哈工科讯物流装备有限公司与九三集团哈尔滨惠康食品有限公司就智能立体化项目顺利达成合作",
                        content:"<p><strong>2018年六月，哈工科讯物流装备有限公司与九三集团哈尔滨惠康食品有限公司就智能立体化项目顺利达成合作</strong>。九三集团哈尔滨惠康食品有限公司是中国最大的非转基因大豆油加工企业，因传统的库房地推形式不足以满足如今市场需求量大的现状，因此在2018年6月惠康公司引入了黑龙江哈工智仓物流装备有限公司研制的智能立体仓储系统。</p> <table align=\"center\" width=\"100%\"> <tr> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/e8b27283-4cbc-445f-809a-284744659346.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">产品形式</font> </center> </td> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/5e3720f1-52d7-4517-923a-cf9d0a9b1fa7.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">控制室视角效果图</font> </center> </td> </tr> </table> <p>智能立体仓库<strong>配有先进的仓储管理信息系统(WMS)和先进的调度系统（WCS）, 并配有与惠康公司现有ERP系统对应的软件接口</strong>，实现与企业现有ERP的无缝对接，实现从前端的生产任务下达到生产入库进行库存管理，又从订单出库到整个发收货过程，通过RFID射频技术及条码系统完全实现了从产品源头到达用户手中全过程的信息追溯，保证了食品安全。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/57d71aab-c84e-4f22-93b1-d2af1f11d9f8.png\" width=\"50%\"> <p>企业系统业务网络图</p> <br /> </center> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/2cf3a702-cbd3-44a1-a4cb-a00a3d6c94e6.png\" width=\"50%\"> <p>智能立体库系统构架</p> <br /> </center> <p>自动化立体仓库内主要分为<strong>输送系统和货架系统两个区域</strong>，库区内设置4个出库口、2个回库口、1个产线入库口及1个托盘组供货口。整个作业流程流畅清晰，从入库、出库再到反库很大程度上提高了效率，满足技术文件内的货位数以及效率要求。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/e0f0f5b4-6664-4077-b739-1c96f8c95330.png\" width=\"50%\"> <p>智能立体库系统作业流程</p> <br /> </center> <p>在整个的系统设计中，采用了自动化立体库房编码和信息自动采集技术和高效先进的仓储管理信息系统（WMS）、调度执行系统（WCS），<strong>实现自动化立体库房内部作业的无纸化</strong>，通过使用RFID无线射频技术来<strong>实现了出入库货物信息的准确管理以及与企业现有ERP系统无缝对接</strong>。</p> <table align=\"center\" width=\"100%\"> <tr> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/23620209-9160-4bd5-b3a9-57bda2c68e0d.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">产品形式</font> </center> </td> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/b7f7be5b-3553-4dad-9260-3ba041e2aeeb.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">控制室视角效果图</font> </center> </td> </tr> </table> <p>不仅充分满足了技术规范中<strong>规定的功能要求和主要技术指标前提</strong>，还<strong>遵循系统完整、通畅实用、安全可靠、先进成熟、规范标准</strong>的设计思想与原则进行系统设计和设备选型，同时还根据场地的实际情况，<strong>结合用户需求，规划出性价比最优的方案</strong>，保证各储区作业的均衡和协调，确保自动化立体库房设备运行的高可靠性和安全性，并满足参观需求。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/07/31/ff36c09c-2d39-4723-a4c8-66204896d25d.png\" width=\"50%\"> <p>叉车正在出货码头装车</p> <br /> </center> <p>通过此系统的落地投产使用，<strong>既改变了传统的人工开叉车搬运产品出入库的工作模式，降低了人工成本，实现了整个库存信息的统一管理，又实现了同等面积下的最大化存储，完全满足了原来多处库房的存储量之和</strong>。另外，从车间码垛打包入库上架到下架发货等工作任务均由操作人员在控制室通过上层软件窗口进行操作实现，其生产入库出库订单完全由上层ERP下达，无需人工干预，保证了信息的准确性。系统与车间产线的可追溯系统连接，完成了瓶、箱、托三级关联，实现了产品信息的可追溯性。WMS、WCS界面形象移动，操作简单，效率高。<strong>总的来说，真实的解决了九三惠康公司在产品存储、产品发运及库存管理等方面存在的传统形式的弊端，也在企业实力及行业影响力上增添了浓墨重彩的一笔</strong>。</p> <p>截至目前，<strong>此系统已正常使用多年，在为企业真正解决了存储空间及信息管理难题的同时也为企业带来了更大的商业价值，自动化程度的提高往往是同行业里关注的焦点</strong>。未来，我公司将继续与九三集团长期保持战略合作伙伴关系，引领无限可能。</p>"
                    },{
                        id:3,
                        cover:"http://8.130.94.42:8080/hgkx/image/2023/08/07/3dcfb557-e1b8-4056-967a-aff2c103edc0.png",
                        title:"聚焦|哈工科讯成果再次闪耀，哈职院智能制造实训中心项目圆满成功！",
                        type:1,
                        dateTime:new Date("2023-08-07"),
                        describe:"哈工科讯物流装备有限公司（简称”哈工科讯“）与哈尔滨职业学院（简称”哈职院“）联手!!!",
                        content:"<p>近日，哈工科讯物流装备有限公司（简称”哈工科讯“）与哈尔滨职业学院（简称”哈职院“）联手，<strong>共同开展智能制造实训项目，为学生提供更高质量的发展机会，共同推进产教融合</strong>。<br /> <br /><br /> <strong>哈工科讯凭借其领先的智能制造技术及产品，助力哈职院自动化智能工厂智能制造教学实训中心的建设</strong>。整个过程均以企业化的标准流程，完整的复现了一个智能制造产线项目的设计、生产、调试、运行的建设全过程。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/788184c6-8110-44d1-b8f5-0eb294132094.png\" width=\"50%\"> <br /> </center> <p>哈职院智能制造创新实训中心建设围绕”六融三化三阶段”的产业级人才培养模式，打通产教融合的人才培养新通道，并基于黑龙江区域经济和行业发展的人才需求，从需求侧推动新工科人才的培养。<strong>智能制造生产线在载体的选取上，关注区域经济特色和发展方向，选取截止阀为加工装配的载体，采用的是机械手与机床相配合的模式，有效的盘活了学校资产</strong>。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/dc5707be-65cd-4d35-a6d6-92d78edc7ea3.png\" width=\"50%\"> <p>物料信息</p> <br /> </center> <p>哈职院中心建设立足适应国家《中国制造2025》战略需要，以振兴东北老工业基地为契机，以大庆油田的井口设备截止阀部件做为产教融合生产性实训载体，以截止阀智能化生产线为核心，建设智能制造创新实训基地，进行工业化实训项目及配套课程开发；同时采用数字化仿真的技术方法，通过<strong>课程管理、设备模拟、虚实结合、过程管理等手段</strong>打造面向智能制造行业的全过程、全要素的仿真体系，支持全方位培训和教学需求。</p> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/37f1356d-0788-46a2-bfdf-95b197ebe857.png\" width=\"50%\"> <p>系统概况示意图</p> <br /> </center> <p>整个系统依托智能管控平台，实现生产、教学的智能化管理，打造包括智能立体仓库、自动化生产线、柔性装配系统、智能线边库、智能物流AGV系统，协同加工中心等现代化智能工厂，并与教学相结合，实现实训任务。为了给学生展示设备的先进性，<strong>大量的引进了哈工科讯的先进设备，实训中心基本上涵盖了目前市场上最为先进的，最为前沿的产品技术</strong>。</p> <table align=\"center\" width=\"100%\"> <tr> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/89f701f6-1111-42de-9b16-54bae6430f88.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">协同加工中心</font> </center> </td> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/0a98a0b2-3034-4fa2-b008-cd0935530071.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">柔性生产线</font> </center> </td> </tr> </table> <table align=\"center\" width=\"100%\"> <tr> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/ee7310f0-66a8-4e0b-941c-3a85ef582998.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">智能立体仓库</font> </center> </td> <td> <center> <img src=\"http://8.130.94.42:8080/hgkx/image/2023/08/07/dd719b30-1671-453e-a45a-e25383b88b59.png\" width=\"300px\" height=\"300px\" /> <br /> <font color=\"AAAAAA\">截止阀柔性装配线</font> </center> </td> </tr> </table> <p>总的来说，<strong>哈职院智能制造创新实训中心项目建设在哈工科讯的协同帮助下，利用信息化的手段完善和优化实践教学管理体系，形成既能够满足职业理论教学、又可以进入真实生产场景实践，进而达到深度产教融合参与规范的市场运营的全新职教新业态</strong>。未来，哈工科讯将继续投入研发，提供先进的技术和服务，为产业融合贡献自己的一份力量。</p>"
                    }
                ];
                /*条件查询*/
                if (this.type!=null && this.type!=0){
                    this.news=this.news.filter(item=>item.type==this.type);
                }
                /*分页*/
                this.pageData.total=this.news.length;
                var indexPage=(this.pageData.page-1)*this.pageData.limit;
                this.news = this.news.slice(indexPage, this.pageData.limit+indexPage);
            },
            //获取页码
            handelPage(val){
                //console.log(val);
                this.pageData.page=val;
                this.listNews();
            },
            setBanners(){
                //设置轮播图
                this.$store.commit("setBanners",this.banners);
            }
        },
        mounted(){
            this.listNews();
            this.setBanners();
            this.setActiceName();
        },
        components:{
            Banner,
        }
    }
</script>

<style scoped>
  @media screen and (max-width: 768px){
    .div-right{
      padding: 10px;
      display: inline-block;
    }
    .div-left{
      padding: 10px;
      display: inline-block;
    }
  }
  @media screen and (min-width: 768px){
    .div-right{
      width: 60%;
      padding: 10px;
      display: inline-block;
      float: right;
    }
    .div-left{
      width: 30%;
      padding: 10px;
      display: inline-block;
    }
  }
  .tabs{
    font-size: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    background-color: #ffffff;
  }
  /deep/ .el-tabs__item{
    font-size: 16px !important;
  }
  .content{
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .content-details{
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  hr{
    color: #cfcfcf;
    border-style:dotted;
  }
  .page-left{
    float: left;
  }
  .page-right{
    float: right;
  }
  .div-page{
    height: 50px;
    padding-top: 25px;
  }
  .a-page{
    color: black;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
  }
  a:hover {
    color: #409EFF;
  }
  span:hover {
    color: #409EFF;
  }
  .img-cover{
    aspect-ratio:16/9;
    max-width: 100%;
  }
</style>
